import React, { Component } from 'react'


export class Item extends Component {

    state = {
        mouse: false
    }

    handleMouse = (isEnter) => {
        return () => {
            this.setState({mouse: isEnter})
        }
    }

    handleCheck = (id) => {
        return (event) => {
            this.props.updateTodo(id, event.target.checked)
        }
    }

    handleDelete = (id) => {
        if(window.confirm('确定删除吗？')) {
            this.props.deleteTodo(id)
        }
    }


    render() {
        const {id, name, done} = this.props
        const {mouse} = this.state
        return (
            <li className={`list-group-item${mouse ? ' active' : ''}`} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
                <div className="d-flex justify-content-between px-2">
                <input className="form-check-input" type="checkbox" id={id+'_done'} checked={done} onChange={this.handleCheck(id)}/>
                <label className="form-check-label" htmlFor={id+'_done'}>{name}</label>
                <button className="btn btn-danger" style={{display: mouse ? 'inline' : 'none'}} onClick={()=>{this.handleDelete(id)}}>删除</button>
                </div>
            </li>
        )
    }
}

export default Item
